<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        #map{
            width: 100%;
            height: 400px;
            border: 1px solid #999;
            padding: 10px;
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GFMVM687MNXyqAHjhXhwsLRtKppFNilf"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script>
    // 创建一个百度地图对象
    var geolocation = new BMapGL.Geolocation();

    // 用百度地图获取位置
    geolocation.getCurrentPosition(function (ps) {
      // 请求成功
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        console.log(ps);
        // 获取经度，维度
        console.log("经度：" + ps.point.lng, "维度：" + ps.point.lat);
        // 获取省，市
        console.log("省：" + ps.address.province);
        console.log("市：" + ps.address.city);
        console.log("街道：" + ps.address.street);

        var map = new BMapGL.Map("map"); // 创建Map实例 (必须用id)
        map.centerAndZoom(new BMapGL.Point(ps.point.lng, ps.point.lat), 12); 
        // 初始化地图,设置中心点坐标和地图缩放级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      } else {
        console.log("定位失败");
      }
    });
  </script>
</html>
